/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header :title="data.title">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <ul class="info">
        <li>
          <span class="lable">专业名称：</span>
          <span class="value">{{data.sname}}</span>
        </li>
        <li>
          <span class="lable">所属科目：</span>
          <span class="value">{{data.cataName}}</span>
        </li>
        <li>
          <span class="lable">考试开始时间：</span>
          <span class="value">{{data.startTime}}</span>
        </li>
        <li>
          <span class="lable">考试结束时间：</span>
          <span class="value">{{data.finishTime}}</span>
        </li>
        <li>
          <span class="lable">试卷题量：</span>
          <span class="value">{{data.numbers}}题</span>
        </li>
        <li>
          <span class="lable">试卷总分：</span>
          <span class="value">{{data.scores}}分</span>
        </li>
      </ul>
      <p class="title">试卷说明</p>
      <p class="mark">{{data.abstract}}</p>
      <div class="footer">
        <div class="btn_box">
          <div class="btn" @click="goQus">{{data.status === 1 ? "查看解析" : "开始答题"}}</div>
        </div>
        <p class="done">有{{data.joined}}人做过</p>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import { calendar_info, plan_info } from "../../api/index.js";

let reqLis = {
  calendar: calendar_info,
  plan: plan_info
};

export default {
  data() {
    return {
      type: "",
      query: {},
      data: {}
    };
  },
  mounted() {
    this.type = this.$router.history.current.query.type;
    this.getData();
  },
  methods: {
    async getData() {
      let q = this.$router.history.current.query;
      let type = this.$router.history.current.query.type;
      console.log("type", type, reqLis);
      let result = await reqLis[type]({ examId: q.id, type: type });
      if (result.code === 1) {
        this.data = result.data;
      } else {
        this.$vux.toast.show(`获取试卷封面:${result.msg}`);
      }
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    goQus() {
      let self = this;
      if (self.data.status === 1) {
        self.$router.push({
          path: "/question",
          query: {
            ...self.$router.history.current.query,
            status: self.data.status
          }
        });
        return;
      }
      this.$vux.confirm.show({
        content: "确定要开始答题吗?",
        onCancel() {
          console.log("plugin cancel");
        },
        onConfirm() {
          // isExam 1不是考试 2是考试
          self.$router.push({
            path: "/question",
            query: {
              ...self.$router.history.current.query,
              status: self.data.status
            }
          });
        }
      });
    }
  },
  components: { Header }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    background: @white;
    padding: 10px 20px;
    .info {
      padding-bottom: 10px;
      border-bottom: 1px solid @red;
      li {
        line-height: 28px;
        .lable {
          color: @font-secondary;
        }
      }
    }
    .title {
      padding: 10px 0;
    }
    .footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      .btn_box {
        .mix-flex-center();
        .btn {
          line-height: 36px;
          padding: 0 36px;
          border-radius: 36px;
          background: @red;
          color: @white;
        }
      }
      .done {
        color: @font-secondary;
        text-align: center;
        font-size: 12px;
        padding: 10px 0;
      }
    }
  }
}
</style>
